<template>
    <div class="login_body">
        <div>
            <input v-model="username" class="login_text" type="text" placeHolder="请输入用户名" >
        </div>
        <div>
            <input v-model="password" class="login_text" type="password" placeHolder="请输入您的密码" >
        </div>
        
        <div class="login_btn">
            <input type="submit" value="登录" @touchstart="handleToLogin">
        </div>
        <div class="login_link">
            <router-link to="/register">立即注册</router-link>
            <router-link to="/findPassword">找回密码</router-link>
        </div>
    </div>
</template>

<script>
import {messageBox} from '@/components/JS';

	export default{
		name:'login',
		data(){
			return{
				username:'',
				password:''
			}
		},
		methods:{
			handleToLogin(){
				this.axios.post('/api2/users/login',{
					username:this.username,
					password:this.password
				}).then((res)=>{
					console.log(res);
					var status=res.data.status;
					var This=this;
					if(status===0){
						messageBox({
							title:'登录',
							content:'登录成功',
							ok:'确定',
							handleOk(){
								This.$router.push('/4');
							}
						});
					}
					else{
						messageBox({
							title:'登录',
							content:'登录失败',
							ok:'确定'
						});
					}
				});
			}
		}
	}
</script>

<style scoped>
#content .login_body{  width:100%;margin-top: 20px;}
.login_body .login_text{ width:100%; height: 40px; border:none; border-bottom: 1px #ccc solid; margin-bottom: 5px; outline: none; text-indent: 10px;}
.login_body .login_btn{ height:50px; margin:10px;}
.login_body .login_btn input{ width:100%; height:100%; background:#007AFF; border-radius: 3px; border:none; display: block; color:white; font-size: 20px;}
.login_body .login_link{ display: flex; justify-content:space-between;}
.login_body .login_link a{ text-decoration: none; margin:0 5px; font-size: 12px; color:#007AFF;}
</style>